<template>
    <div class="scheme">
        <el-dialog title="保存方案" :visible.sync="dialogVisible" width="580px" @close='close'>
            <div class="scheme_form">
                <el-form :model="wayForm" :rules="rules" ref="ruleForm" label-width="120px" size="mini">
                    <el-form-item label="方案名称" prop="name">
                        <el-input v-model="wayForm.name" placeholder="请填写"></el-input>
                    </el-form-item>
                    <el-form-item label="使用范围" prop="userIdName">
                        <select-tree ref="tree" :instructType="instructType" :isGetAllLabel="true"></select-tree>
                    </el-form-item>
                    <el-form-item label="状态">
                        <span style="color:rgba(0,0,0,.65)">未开始,执行中</span>
                    </el-form-item>
                </el-form>
            </div>
            <div class="operate">
                <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" size="mini" @click="confirm">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {
        screenPlanHandle
    } from '@/api/produceController'
    import selectTree from '@/components/selectTree'
    export default {
        data() {
            return {
                wayForm: {
                    type:0,
                    name: '',
                    userIdName: [],
                    userId:'',
                    depId:'',
                    secondGroup: '工单状态',
                    workOrderSearchVo:{
                        configData: [{fieldId: "state", fieldValue: [0, 1],chineseName:'状态'}]
                    }
                },
                rules: {
                    name: [{
                            required: true,
                            message: '方案名称必填',
                            trigger: 'change'
                        },
                        {
                            max: 20,
                            message: '方案名称长度不能大于20',
                            trigger: 'change'
                        }
                    ]
                },
                dialogVisible: false,
                instructType:'create'
            }
        },
        props:{
            editableTabs:{
                type:Array,
                default:()=>[]
            }
        },
        components:{
            selectTree
        },
        methods: {
            //筛选方案操作
            getScreenPlanHandle(data) {
                screenPlanHandle(data).then(res => {
                    if (res.code == 200) {
                        //当无筛选方案时--执行保存当前第一次需要调用列表接口
                        this.$emit('getList',{length:!this.editableTabs.length ? 1 : 0})
                        this.close()
                        this.dialogVisible = false
                    }
                })
            },
            //打开
            showDialog() {
                this.dialogVisible = true
                this.$nextTick(()=>{
                    this.$refs.tree.handleDefaultValue(this.instructType)
                })
            },
            //关闭
            close() {
                this.$refs.ruleForm.resetFields()
                this.$refs.tree.clearTreeInfo()
                this.wayForm = this.$options.data().wayForm
            },
            //确定
            confirm() {
                this.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                        let data = JSON.parse(JSON.stringify(this.wayForm))
                        const {userId,depId,selectNames} = this.$refs.tree.getTreeInfo()
                        data.userId = userId
                        data.depId = depId
                        data.userIdName = selectNames.toString()
                        this.getScreenPlanHandle(data)
                    } else {
                        return false;
                    }
                });
            },
        }
    }
</script>

<style lang="less" scoped>
    .scheme {

        .el-form {
            /deep/ .el-form-item:last-child {
                margin-bottom: 0;
            }
        }

        /deep/ .el-select {
            width: 100%;
        }

        /deep/ .el-tag.el-tag--info {
            transition: all 0.2s;
        }

        /deep/ .el-dialog__body {
            .scheme_form {
                padding: 20px 20px;
                background-color: rgb(250, 250, 250);
                margin-bottom: 20px;
            }

            .operate {
                text-align: center;
                margin-bottom: 10px;
            }

            .el-button--mini {
                padding: 7px 35px;
            }
        }
    }
</style>